<template>
    <div class="infer_number">
        <div class="title">
            <img src="@/assets/status/404@2x.png" alt="">
            <div class="hua">
                <span>测算结果</span>
                <i class="icon iconfont icon-tabxiala"></i>
            </div>
        </div>
        <div class="num_result">
            <p class="f32"><span>手机号码：</span><strong>{{$store.state.userPhone}}<b>({{fortune.symbol}})</b></strong></p>
            <p class="f30"><span>凶吉分析：</span><strong>{{fortune.tip}}</strong></p>
            <p class="f30"><span>属性分析：</span><strong>{{fortune.tip2}}</strong></p>
            <p class="f30"><span>性格分析：</span><strong>{{fortune.words}}</strong></p>
            <div class="tishi">(机器测算结果，实际因人而异，老师详解更准确哦！)</div>
        </div>
        <button class="f32" @click="xiang()">老师详批</button>
    </div>
</template>

<script>
    export default {
        name: 'inferNumber',
        data() {
            return {
                fortune: {}
            }
        },
        methods: {
            cesuanPhone() {
                let params = {
                phoneNumber: this.$store.state.userPhone
                }
                this.$http.fetchGet('cesuanPhone', params).then(res => {
                    this.fortune = res.data
                })
            },
            xiang() {
                this.$router.push({
                    path: '/selectmaster',
                    query: {
                        cid: 3,
                        fqId: '',
                        fqtext: `我的手机号是【${this.$store.state.userPhone}】，请老师帮忙分析一下结果。` //平台机器测算为【${this.fortune.symbol}--${this.fortune.tip2}】
                    }
                })
            }
        },
        created() {
            this.cesuanPhone()
        }
    }
</script>

<style lang="less" scoped>
    .infer_number{
        .p(20);
        h3{
            text-align: center;
            .mt(40);
            .mb(40);
        }
        .title{
            position: relative;
            img{
                .w(160);
                position: relative;
                top: 5px;
                left: 35px;
            }
            .hua{
                display: inline-block;
                .w(200);
                .h(75);
                .lh(75);
                text-align: center;
                background: #189BEB;
                color: #fff;
                border-radius: 5px;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: 8px;
                i.icon{
                    position: absolute;
                    bottom: -23px;
                    left: 50%;
                    transform: translateX(-50%);
                    .f32;
                    color: #189BEB;
                }
            }
        }
        .num_result{
            border: 1px solid #999999;
            border-radius: 5px;
            .padd(0, 20);
            .p(10);
            p{
                .lh(40);
                .mt(10);
                // text-indent: 2em;
                display: flex;
                span{
                    font-weight: normal;
                    .w(160);
                    .f30;
                    font-weight: 600;
                }
                strong{
                    flex: 1;
                    font-weight: normal;
                    color: #666;
                }
                b{
                    color: red;
                    .ml(20);
                    font-weight: normal;
                }
            }
            .tishi{
                text-align: center;
                .mt(40);
                .mb(20);
                color: #666;
            }
        }
        button{
            display: block;
            margin: 0 auto;
            .mt(40);
            border: none;
            .padd(20, 60);
            background: #189BEB;
            color: #fff;
            border-radius: 500px;
        }
    }
</style>
